<template>
  <div class="login">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      label-position="top"
    >
      <el-form-item prop="email">
        <el-input v-model="ruleForm.email" placeholder="输入邮箱"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="ruleForm.password"
          placeholder="设置密码"
          show-password
        >
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="code">
        <el-input
          v-model="ruleForm.code"
          placeholder="请输入验证码"
          maxlength="6"
        >
        </el-input>
        <sendCode :email="ruleForm.email" event="register"></sendCode>
      </el-form-item>
      <div class="btn pointer" @click="onSubmit">注 册</div>
      <div class="checkBox">
        <el-checkbox v-model="checked"></el-checkbox>&nbsp;&nbsp;我已阅读并同意
        <span class="pointer" @click="open('user_agreement')"
          >《用户服务协议》</span
        >和
        <span class="pointer" @click="open('service_agreement')"
          >《平台服务协议》</span
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "loginView",
  data() {
    return {
      checked: true,
      ruleForm: {
        mobile: "",
        password: "",
        code: "",
      },
      rules: {
        email: [{ required: true, message: "请输入邮箱地址", trigger: "blur" }],
        password: [{ required: true, message: "请设置密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  components: {
    sendCode: () => import("@/components/popup/sendCode.vue"),
  },
  props: {
    isLogin: {
      default: false,
    },
  },
  mounted() {},
  methods: {
    ...mapMutations(["handleLogin"]),
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$post("/user/register", {
            ...this.ruleForm,
          }).then((res) => {
            if (res.code == 1) {
              this.$message.success(res.msg);
              localStorage.setItem("token", res.data.userinfo.token);
              this.$emit("update:isLogin", true);
              this.$emit("update:visible", false);
            }
          });
        } else {
          return false;
        }
      });
    },
    handleFind() {
      this.$emit("handleFind", true);
    },
    open(type) {
      this.$emit("openAgree", type);
    },
  },
};
</script>

<style scoped lang="scss">
.login {
  display: flex;
  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    content: "";
  }
  :deep .el-input__inner {
    border: none;
    border-bottom: 2px dotted #a0a0a0;
    font-size: 18px;
    padding-left: 0;
  }

  .el-form-item {
    margin-bottom: 40px;
  }
  .el-form {
    width: 100%;
    .btn {
      text-align: center;
      color: #fff;
      background: #917bbd;
      border-radius: 8px;
      line-height: 60px;
      margin-bottom: 20px;
      font-size: 26px;
    }
    .bottom {
      text-align: right;
      color: #a0a0a0;
      font-size: 18px;
    }
  }
  .checkBox {
    margin-top: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-wrap: wrap;
    span {
      color: #917bbd;
    }

    :deep .el-checkbox__input.is-checked .el-checkbox__inner,
    :deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #917bbd;
      border-color: #917bbd;
    }
  }
}

@media screen and (max-width: 768px) {
  .login .el-input__inner {
    font-size: 14px;
  }
  .login .el-form-item {
    margin-bottom: 20px;
  }
  .login .el-form .btn {
    line-height: 54px;
    font-size: 18px;
  }
  .login .el-form .bottom {
    font-size: 14px;
  }
}
</style>
